<template>
	<div class="bind-phone">
		<div class="com-header border-1px">
			<div class="back"
				onclick="javascript:history.go(-1)"
			>
				<i class="iconfont">&#xe697;</i>
			</div>
			<div class="content">
				绑定手机号
			</div>
		</div>
		<div class="bp-content">
			<div class="c-item border-1px">
				<input type="text" 
					placeholder="请输入您的手机号"
					v-model.trim="mobile"
				>
			</div>
			<div class="c-item border-1px">
				<input type="text" 
					placeholder="请输入验证码"
					v-model.trim="captcha"
				>
				<p @click="getCode()" class="code">{{verifyText}}</p>
			</div>
			<div class="submit"
				@click="submit()"
			>
				<p>确定</p>
			</div>			
		</div>
	</div>
</template>
<script>
	import { Toast } from 'mint-ui'
	import axios from 'axios'
	import Http from '../http.js'
	export default{
		data(){
			return{
				verifyText: '获取验证码',
				mobile: '',
				invite_code: '',
				captcha: '',
				userinfo: '',
				password: '',
				exist: 1,
				isName: false,
			}
		},
		beforeRouteEnter (to,from,next){
			next( vm => {
				if (!from.name) {
					vm.isName = true
				}
			})
		},
		methods: {
			getCode: function (event) {
	            if (this.mobile === '') {
	                Toast('请先输入手机号码')
	                return
	            }
	            this.isSending = true;
	            document.getElementById('help').style.display="none";
	            var params = new URLSearchParams();
                params.append('mobile', this.mobile);
                params.append('event', 'wxbindmobile ');
	            axios.post(Http.SMSSEND, params)
	                .then( res => {
	                    const ret = res.data
	                    if (ret['code'] === 1) {
	                    	Toast(ret.msg);
	                    	this.exist = ret.data.exist;
	                        let count = 60;
	                        let tempObject = setInterval(() => {
	                            this.verifyText = count--;
	                            if (count <= 0) {
	                                this.isSending = false
	                                this.verifyText = '重新获取'
	                                clearInterval(tempObject)
	                            }
	                        }, 1000);
	                    } else {
	                        Toast(ret['msg'])
	                        this.isSending = false
	                    }
	                }, (res) => {
	                    this.isSending = false
	                })
		    },
		    submit: function(){
		    	var params = new URLSearchParams()
                params.append('mobile', this.mobile)
                params.append('captcha', this.captcha)
                axios.post(Http.WXBINGDMOBILE, params).then( res => {
                	var ret =res.data;
                	var recode = ret['code']               	
                	if(recode == 1){
                		window.localStorage.setItem("token", ret['data']['userinfo']['token'])
                		Toast(ret.msg)
                		if (this.isName) {
                			this.$router.push("/")
                		}else{
                			this.$router.go(-1)
                		}               		
                	}else{
                		Toast(ret.msg)
                	}
                })
		    },
		}
	}
</script>
<style lang="scss" scoped>
	.bind-phone{
		.bp-content{
			min-height: 11.8rem;
			background: #f5f5f5;
			.c-item{
				position: relative;
				text-align: left;
				width: 100%;
				height: 0.88rem;
				line-height: 0.88rem;
				font-size: 0.26rem;
				input{
					text-indent: 0.24rem;
					height: 0.88rem;
					width: 100%;
					vertical-align: top;
				}
				p{
					position: absolute;
					top: 0.14rem;
					right: 0.24rem;
					text-align: center;
					height: 0.6rem;
					line-height: 0.6rem;
					border-radius: 0.6rem;
					width: 2rem;
					&.paste{
						background: linear-gradient(to right,rgb(255,101,68), $color);
						color: #fff; 
					}
					&.code{
						border: 0.01rem solid #DCDFE6;
						color: #666;
					}
				}
				.eyes{
					position: absolute;
					top: 0;
					right: 4%;
					width: 0.88rem;
					height: 0.88rem;
					line-height: 0.88rem;
					text-align: center;
					.iconfont{
						font-size: 0.4rem;
					}
				}
			}
			.submit{
				margin: 0.3rem 8%;
				height: 0.88rem;
				line-height: 0.88rem;
				background: linear-gradient(to right,rgb(255,101,68), $color);
				box-shadow: 0 0 0.2rem rgb(255,101,68);
				border-radius: 0.88rem;
				color: #fff;
			}
		}
	}
</style>